<template>
  <div class="header">
    <div class="left">
      <div
        class="title"
        v-for="(item, index) in lefts"
        :key="index"
        :class="{ active1: active == index }"
        @click="changeActive(index)"
      >
        {{ item }}
      </div>
    </div>

    <div class="right">
      <div class="middle">
        <div
          class="date"
          v-for="(item, index) in right"
          :key="index"
          :class="{ active2: active2 == index }"
          @click="active2 = index"
        >
          {{ item }}
        </div>
      </div>
      <el-date-picker
        type="daterange"
        unlink-panels
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
        :shortcuts="shortcuts"
        size="large"
      ></el-date-picker>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const active = ref(0);
const active2 = ref(0);
const lefts = ref(['销售额', '访问量']);
const right = ref(['今日', '本周', '本月', '本年']);
const emit = defineEmits(['tab-change']);
const changeActive = (index) => {
  active.value = index;
  emit('tab-change', index);
};
const shortcuts = [
  {
    text: '最近一周',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
      return [start, end];
    },
  },
  {
    text: '最近一个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
      return [start, end];
    },
  },
  {
    text: '最近三个月',
    value: () => {
      const end = new Date();
      const start = new Date();
      start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
      return [start, end];
    },
  },
];
</script>

<style scoped>
.header {
  height: 40px;
  border-bottom: 1px solid #eee;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.left {
  display: flex;

  color: rgb(124, 128, 128);
  font-size: 14px;
  cursor: pointer;
  margin-left: 50px;
  margin-bottom: 10px;
}
.title {
  width: 80px;
  height: 50px;
  line-height: 40px;

  text-align: center;
}
.middle {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: 280px;
  border: 1px solid #eee;
  border-radius: 5px;
}
.date {
  width: 70px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  color: #666;
  font-size: 14px;
  cursor: pointer;
  font-weight: bolder;
}
.date:not(.active2):hover {
  color: #09b3f7;
}
.date:nth-child(1) {
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}
.date:nth-child(4) {
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}
.date:not(:nth-child(4)) {
  border-right: 1px solid #eee;
}
.right {
  display: flex;
  gap: 20px;
  padding-bottom: 20px;
}
.active1 {
  border-bottom: #09b3f7 solid 2px;
  color: #444343;
}
.active2 {
  background-color: #09b3f7;
  color: #fff;
}
</style>
